import React, { useEffect, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card,Table,Form, Input, Modal, message } from 'antd';
import {queryRequest,editRequest} from './services';

const Index = () => {
  const [currentInfo,setCurrentInfo] = useState<{show:boolean,info:any}>({show:false,info:{}});
  const [dataSource,setDataSource] = useState<any[]>([]);
  const [form] = Form.useForm();
  const columns = [
    {
      title: '商品名称',
      dataIndex: 'name',
    },
    {
      title: '所属类别',
      dataIndex: 'type',
    },
    {
      title: '描述',
      dataIndex: 'desc',
    },
    {
      title: '配送费',
      dataIndex: 'delivery',
    },
    {
      title:'价格（元）',
      dataIndex:'price'
    },
    {
      title:'用餐数量',
      dataIndex:'count'
    },
    {
      title:'拼团人数',
      dataIndex:'ptrs'
    },
    {
      title: '操作',
      dataIndex: 'id',
      render: (id:number,record:any) => <a onClick={(e) => {
          e.preventDefault();
          setCurrentInfo({show:true,info:record});
          form.setFieldsValue({
            name: record.name,
            desc: record.name,
            price: record.price,
            delivery: record.delivery
          })
        }}> 编辑 </a>,
    },
  ];
  //初始化
  useEffect(() => {
    getList();
  },[]);
  //请求列表接口
  const getList = async () => {
    // setDataSource([
    //   {name:'name',type:'2',desc:'ms1',delivery:2,price:99,count:3,ptrs:10,id:2},
    //   {name:'na2me',type:'32',desc:'m4s1',delivery:12,price:919,count:13,ptrs:120,id:1},
    // ]);
    const res = await queryRequest();
    setDataSource(res)
    console.log(res)
  }
  //提交编辑
  const handleOK = () => {
    form.validateFields().then(async (values) => {
      let params = {
        ...values,
        id:currentInfo.info.id
      }
      let res = await editRequest(params);
      if(res.success){
        message.success('修改成功');
        setCurrentInfo({show:false,info:{}});
        getList();
      }
      // console.log(res);
    }).catch(info => {
      console.log(info)
    })
  }

  return <PageHeaderWrapper title={false}>
    <Card>
      <Table
        rowKey='id'
        columns={columns}
        dataSource={dataSource}
        pagination={false}
      />
    </Card>
    <Modal
      title='编辑'
      visible={currentInfo.show}
      onCancel={()=>{
        form.resetFields();
        setCurrentInfo({show:false,info:{}})
      }}
      destroyOnClose={true}
      onOk={handleOK}
    >
      <Form
        labelCol={{span:4}}
        wrapperCol={{span:20}}
        form={form}
      >
        <Form.Item label='商品名称' name="name" rules={[{required: true, message: '请输入商品名称'}]}>
          <Input/>
        </Form.Item>
        <Form.Item label='描述' name="desc">
          <Input/>
        </Form.Item>
        <Form.Item label='价格（元）' name="price" rules={[{required: true, message: '请输入商品名称'}]}>
          <Input/>
        </Form.Item>
        <Form.Item label='配送费' name="delivery" rules={[{required: true, message: '请输入商品名称'}]}>
          <Input/>
        </Form.Item>
      </Form>
    </Modal>
  </PageHeaderWrapper>
}

export default Index;